<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试网页</title>
	<style >
		*{padding: 0;margin:0;}
		.banner{
			height: 320px;
			position: relative;
		}
		.img-list{
			position: relative;
		}
		.img-item{
			height: 320px;
			position: absolute;
			left: 0;
			right: 0;
			top:0;
			bottom:0;
			background-position: center top; 
			z-index: 5
		}
		.img-idx-box{
			position: absolute;
			bottom: 40px;
			left: 0;
			right: 0;
			text-align: center;
			z-index: 10;
		}
		.img-idx{
			display: inline-block;
			width: 50px;
			height: 10px;
			background: #fff;
			opacity: 0.7;
			filter:alpha(opacity=70);
		}
		.img-idx.active{
			opacity: 1;
			background: red;
			filter:alpha(opacity=100);
		}
	</style>
</head>
<body>
	<div id="banner" class="banner">
		<div class="img-list">
			<div class="img-item" style="background-image:url('banner-1.png')"></div>
			<div class="img-item" style="background-image:url('banner-gh.jpg')"></div>
			<div class="img-item" style="background-image:url('banner-2.jpg')"></div>
			
		</div>
		<div class="img-idx-box">
			<a href="javascript:;" class="img-idx"></a>
			<a href="javascript:;" class="img-idx"></a>
			<a href="javascript:;" class="img-idx"></a>
			
		</div>
	</div>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
	(function ($) {
		$.fn.banner=function  (a) {
			var agm={
				img:'.img-item',
				idxObj:'.img-idx',
				idxOn:'active',
				time:1000,
			}
			var o=$.extend(agm,a);
			var _this=$(this);
			var imgObj=_this.find(o.img)
			var idxObj=_this.find(o.idxObj); //查找

			var idx=0;
			var timer=null;
			function checkIdx(x){
				if(x<0){
					x=imgObj.size()-1;
				}else if(x==imgObj.size()){
					x=0;
				}
				return x;
			} //验算 idx
			function play(x){
				imgObj.fadeOut(400);
				imgObj.eq(x).fadeIn(400);
				idxObj.removeClass(o.idxOn);
				idxObj.eq(x).addClass(o.idxOn);
			}//传入 idx  执行对应的图片显示
			idxObj.click(function(){
				idx=$(this).index();
				play(idx);
			}); //获取点击的下标的索引 赋值到 idx  执行对应的图片显示
			timer=setInterval(function(){
				idx=checkIdx(idx+1);
				play(idx);
			},o.time);
			//执行图片播放
			_this.hover(function(){
				clearInterval(timer)
			},function(){
				timer=setInterval(function(){
					idx=checkIdx(idx+1);
					play(idx);
				},o.time);
			})//移入终止图片轮播。移出执行图片轮播
		}
	})(jQuery)

	/*
		time:1000 播放的时间间隔
		img:'.img-item', 播放的图片class
		idxObj:'.img-idx',播放的下标class
		idxOn:'active',  播放的下标 选中class
	*/
	$('#banner').banner({time:1000});
	</script>
</body>
</html>